<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Bootstrap 简介 | 我的笔记</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/notebook/favicon.ico">
    <script data-ad-client="ca-pub-4147143076931995" async="true" src="/notebook//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <meta name="description" content="方便阅读和寻找">
    
    <link rel="preload" href="/notebook/assets/css/0.styles.0461dffb.css" as="style"><link rel="preload" href="/notebook/assets/js/app.fc2ebdde.js" as="script"><link rel="preload" href="/notebook/assets/js/2.cb323964.js" as="script"><link rel="preload" href="/notebook/assets/js/63.ac1f088e.js" as="script"><link rel="prefetch" href="/notebook/assets/js/10.0fa9d2a6.js"><link rel="prefetch" href="/notebook/assets/js/100.8f01f121.js"><link rel="prefetch" href="/notebook/assets/js/101.bad508dc.js"><link rel="prefetch" href="/notebook/assets/js/102.73848103.js"><link rel="prefetch" href="/notebook/assets/js/103.c33d2646.js"><link rel="prefetch" href="/notebook/assets/js/104.d33ee3c3.js"><link rel="prefetch" href="/notebook/assets/js/105.9ab450e7.js"><link rel="prefetch" href="/notebook/assets/js/106.b2579191.js"><link rel="prefetch" href="/notebook/assets/js/107.f55eaafa.js"><link rel="prefetch" href="/notebook/assets/js/108.009bdcf7.js"><link rel="prefetch" href="/notebook/assets/js/109.2032aac8.js"><link rel="prefetch" href="/notebook/assets/js/11.fb1562a8.js"><link rel="prefetch" href="/notebook/assets/js/110.bca8d3df.js"><link rel="prefetch" href="/notebook/assets/js/111.7f6d8034.js"><link rel="prefetch" href="/notebook/assets/js/112.84f9ebf4.js"><link rel="prefetch" href="/notebook/assets/js/113.8dce20c0.js"><link rel="prefetch" href="/notebook/assets/js/114.f244c2ef.js"><link rel="prefetch" href="/notebook/assets/js/115.58c729ee.js"><link rel="prefetch" href="/notebook/assets/js/116.392200ab.js"><link rel="prefetch" href="/notebook/assets/js/117.7ccb5dd6.js"><link rel="prefetch" href="/notebook/assets/js/118.c4fc06a5.js"><link rel="prefetch" href="/notebook/assets/js/119.035340fb.js"><link rel="prefetch" href="/notebook/assets/js/12.0a6689a6.js"><link rel="prefetch" href="/notebook/assets/js/120.0b963f2e.js"><link rel="prefetch" href="/notebook/assets/js/121.8c244993.js"><link rel="prefetch" href="/notebook/assets/js/122.6129d242.js"><link rel="prefetch" href="/notebook/assets/js/123.ff1fd4e4.js"><link rel="prefetch" href="/notebook/assets/js/124.76b424ac.js"><link rel="prefetch" href="/notebook/assets/js/125.65edbb21.js"><link rel="prefetch" href="/notebook/assets/js/126.82be123a.js"><link rel="prefetch" href="/notebook/assets/js/127.e24b54b2.js"><link rel="prefetch" href="/notebook/assets/js/128.aa621fc0.js"><link rel="prefetch" href="/notebook/assets/js/129.a2028e58.js"><link rel="prefetch" href="/notebook/assets/js/13.b6a71949.js"><link rel="prefetch" href="/notebook/assets/js/130.75bb50d5.js"><link rel="prefetch" href="/notebook/assets/js/131.4a8055bf.js"><link rel="prefetch" href="/notebook/assets/js/132.51de3f37.js"><link rel="prefetch" href="/notebook/assets/js/133.c32018c1.js"><link rel="prefetch" href="/notebook/assets/js/134.e8fc1259.js"><link rel="prefetch" href="/notebook/assets/js/135.704fb804.js"><link rel="prefetch" href="/notebook/assets/js/136.2c2b839a.js"><link rel="prefetch" href="/notebook/assets/js/137.8d5a7cec.js"><link rel="prefetch" href="/notebook/assets/js/138.32d0e706.js"><link rel="prefetch" href="/notebook/assets/js/139.963aa166.js"><link rel="prefetch" href="/notebook/assets/js/14.90aa7f31.js"><link rel="prefetch" href="/notebook/assets/js/140.350d30a3.js"><link rel="prefetch" href="/notebook/assets/js/141.084c5471.js"><link rel="prefetch" href="/notebook/assets/js/142.30f419b0.js"><link rel="prefetch" href="/notebook/assets/js/143.2e5c7fb1.js"><link rel="prefetch" href="/notebook/assets/js/144.8273db0b.js"><link rel="prefetch" href="/notebook/assets/js/145.9b456605.js"><link rel="prefetch" href="/notebook/assets/js/146.b60dd7ec.js"><link rel="prefetch" href="/notebook/assets/js/147.3464bc66.js"><link rel="prefetch" href="/notebook/assets/js/148.c7fbe319.js"><link rel="prefetch" href="/notebook/assets/js/149.aa3c3570.js"><link rel="prefetch" href="/notebook/assets/js/15.a3f8fe14.js"><link rel="prefetch" href="/notebook/assets/js/150.1b530a4a.js"><link rel="prefetch" href="/notebook/assets/js/151.1d74b74a.js"><link rel="prefetch" href="/notebook/assets/js/152.8876ce56.js"><link rel="prefetch" href="/notebook/assets/js/153.9615c820.js"><link rel="prefetch" href="/notebook/assets/js/154.c5a04f61.js"><link rel="prefetch" href="/notebook/assets/js/155.42fe5d24.js"><link rel="prefetch" href="/notebook/assets/js/156.5382fe13.js"><link rel="prefetch" href="/notebook/assets/js/157.8f26637a.js"><link rel="prefetch" href="/notebook/assets/js/158.99bf92f9.js"><link rel="prefetch" href="/notebook/assets/js/159.02074d5d.js"><link rel="prefetch" href="/notebook/assets/js/16.0b2c3f06.js"><link rel="prefetch" href="/notebook/assets/js/160.18773305.js"><link rel="prefetch" href="/notebook/assets/js/161.56d5c77b.js"><link rel="prefetch" href="/notebook/assets/js/162.f2fa8c3f.js"><link rel="prefetch" href="/notebook/assets/js/163.ec6e5101.js"><link rel="prefetch" href="/notebook/assets/js/164.cf033dea.js"><link rel="prefetch" href="/notebook/assets/js/165.ed884518.js"><link rel="prefetch" href="/notebook/assets/js/166.c3ef02c5.js"><link rel="prefetch" href="/notebook/assets/js/167.ffcec907.js"><link rel="prefetch" href="/notebook/assets/js/168.3066b37b.js"><link rel="prefetch" href="/notebook/assets/js/169.3a6c095a.js"><link rel="prefetch" href="/notebook/assets/js/17.b3d4e4d0.js"><link rel="prefetch" href="/notebook/assets/js/170.c4b63ba0.js"><link rel="prefetch" href="/notebook/assets/js/171.e7b7a406.js"><link rel="prefetch" href="/notebook/assets/js/172.1937a4d9.js"><link rel="prefetch" href="/notebook/assets/js/173.b84a1264.js"><link rel="prefetch" href="/notebook/assets/js/174.2d520922.js"><link rel="prefetch" href="/notebook/assets/js/175.06ca12ce.js"><link rel="prefetch" href="/notebook/assets/js/176.22d2b5ce.js"><link rel="prefetch" href="/notebook/assets/js/177.b8223d23.js"><link rel="prefetch" href="/notebook/assets/js/178.a7444d6e.js"><link rel="prefetch" href="/notebook/assets/js/179.956c38d9.js"><link rel="prefetch" href="/notebook/assets/js/18.ff084964.js"><link rel="prefetch" href="/notebook/assets/js/180.1ef2f707.js"><link rel="prefetch" href="/notebook/assets/js/181.1ea69c37.js"><link rel="prefetch" href="/notebook/assets/js/182.976de515.js"><link rel="prefetch" href="/notebook/assets/js/183.a958ffc8.js"><link rel="prefetch" href="/notebook/assets/js/184.acfe98b3.js"><link rel="prefetch" href="/notebook/assets/js/185.d7d0b1e1.js"><link rel="prefetch" href="/notebook/assets/js/186.232ecd40.js"><link rel="prefetch" href="/notebook/assets/js/187.c04826db.js"><link rel="prefetch" href="/notebook/assets/js/19.85405509.js"><link rel="prefetch" href="/notebook/assets/js/20.3f002717.js"><link rel="prefetch" href="/notebook/assets/js/21.c4abbc11.js"><link rel="prefetch" href="/notebook/assets/js/22.6dc725eb.js"><link rel="prefetch" href="/notebook/assets/js/23.acf2c2de.js"><link rel="prefetch" href="/notebook/assets/js/24.6b326de3.js"><link rel="prefetch" href="/notebook/assets/js/25.7bc09179.js"><link rel="prefetch" href="/notebook/assets/js/26.b86f1f13.js"><link rel="prefetch" href="/notebook/assets/js/27.2d63a297.js"><link rel="prefetch" href="/notebook/assets/js/28.f0941146.js"><link rel="prefetch" href="/notebook/assets/js/29.41f0a5e9.js"><link rel="prefetch" href="/notebook/assets/js/3.551ca64d.js"><link rel="prefetch" href="/notebook/assets/js/30.8bcc495f.js"><link rel="prefetch" href="/notebook/assets/js/31.03b7c97f.js"><link rel="prefetch" href="/notebook/assets/js/32.2df84deb.js"><link rel="prefetch" href="/notebook/assets/js/33.3d4012c9.js"><link rel="prefetch" href="/notebook/assets/js/34.b4cc3aa1.js"><link rel="prefetch" href="/notebook/assets/js/35.a9672742.js"><link rel="prefetch" href="/notebook/assets/js/36.13d5a21c.js"><link rel="prefetch" href="/notebook/assets/js/37.7948bb5d.js"><link rel="prefetch" href="/notebook/assets/js/38.232cb406.js"><link rel="prefetch" href="/notebook/assets/js/39.a6295073.js"><link rel="prefetch" href="/notebook/assets/js/4.abcfd508.js"><link rel="prefetch" href="/notebook/assets/js/40.29c33784.js"><link rel="prefetch" href="/notebook/assets/js/41.05c2db03.js"><link rel="prefetch" href="/notebook/assets/js/42.6e529eee.js"><link rel="prefetch" href="/notebook/assets/js/43.47a36e69.js"><link rel="prefetch" href="/notebook/assets/js/44.838a4eb8.js"><link rel="prefetch" href="/notebook/assets/js/45.6935e81d.js"><link rel="prefetch" href="/notebook/assets/js/46.84140996.js"><link rel="prefetch" href="/notebook/assets/js/47.3c070258.js"><link rel="prefetch" href="/notebook/assets/js/48.09846d9a.js"><link rel="prefetch" href="/notebook/assets/js/49.dc311180.js"><link rel="prefetch" href="/notebook/assets/js/5.fb7d0b2e.js"><link rel="prefetch" href="/notebook/assets/js/50.6f7a7670.js"><link rel="prefetch" href="/notebook/assets/js/51.7c290808.js"><link rel="prefetch" href="/notebook/assets/js/52.d2d2392b.js"><link rel="prefetch" href="/notebook/assets/js/53.9e4ab455.js"><link rel="prefetch" href="/notebook/assets/js/54.450b55f2.js"><link rel="prefetch" href="/notebook/assets/js/55.051b9c2a.js"><link rel="prefetch" href="/notebook/assets/js/56.912cdfb9.js"><link rel="prefetch" href="/notebook/assets/js/57.025835e2.js"><link rel="prefetch" href="/notebook/assets/js/58.b69416cd.js"><link rel="prefetch" href="/notebook/assets/js/59.557de5a7.js"><link rel="prefetch" href="/notebook/assets/js/6.acac6f32.js"><link rel="prefetch" href="/notebook/assets/js/60.4972cb78.js"><link rel="prefetch" href="/notebook/assets/js/61.5fa58121.js"><link rel="prefetch" href="/notebook/assets/js/62.e8ce6f8e.js"><link rel="prefetch" href="/notebook/assets/js/64.1b90d3e2.js"><link rel="prefetch" href="/notebook/assets/js/65.084c1fd5.js"><link rel="prefetch" href="/notebook/assets/js/66.1efb80b7.js"><link rel="prefetch" href="/notebook/assets/js/67.e24185d6.js"><link rel="prefetch" href="/notebook/assets/js/68.51ad0989.js"><link rel="prefetch" href="/notebook/assets/js/69.a70b689b.js"><link rel="prefetch" href="/notebook/assets/js/7.d714395a.js"><link rel="prefetch" href="/notebook/assets/js/70.56adaa78.js"><link rel="prefetch" href="/notebook/assets/js/71.8d7f2969.js"><link rel="prefetch" href="/notebook/assets/js/72.2b8a8a30.js"><link rel="prefetch" href="/notebook/assets/js/73.d89ea8f4.js"><link rel="prefetch" href="/notebook/assets/js/74.f7604c2f.js"><link rel="prefetch" href="/notebook/assets/js/75.8e6fd30e.js"><link rel="prefetch" href="/notebook/assets/js/76.ec1a8edc.js"><link rel="prefetch" href="/notebook/assets/js/77.0fb621cd.js"><link rel="prefetch" href="/notebook/assets/js/78.6901727f.js"><link rel="prefetch" href="/notebook/assets/js/79.ee4ee9f6.js"><link rel="prefetch" href="/notebook/assets/js/8.6b3d94d9.js"><link rel="prefetch" href="/notebook/assets/js/80.a822b170.js"><link rel="prefetch" href="/notebook/assets/js/81.52d0958c.js"><link rel="prefetch" href="/notebook/assets/js/82.8b93326f.js"><link rel="prefetch" href="/notebook/assets/js/83.0107e039.js"><link rel="prefetch" href="/notebook/assets/js/84.67d50d73.js"><link rel="prefetch" href="/notebook/assets/js/85.c9dc84c4.js"><link rel="prefetch" href="/notebook/assets/js/86.25160b21.js"><link rel="prefetch" href="/notebook/assets/js/87.0da247b4.js"><link rel="prefetch" href="/notebook/assets/js/88.13d2e7f3.js"><link rel="prefetch" href="/notebook/assets/js/89.8b742de8.js"><link rel="prefetch" href="/notebook/assets/js/9.ae054c3d.js"><link rel="prefetch" href="/notebook/assets/js/90.5279d9c6.js"><link rel="prefetch" href="/notebook/assets/js/91.13e9d03c.js"><link rel="prefetch" href="/notebook/assets/js/92.78e54b32.js"><link rel="prefetch" href="/notebook/assets/js/93.78ae305c.js"><link rel="prefetch" href="/notebook/assets/js/94.396fa5af.js"><link rel="prefetch" href="/notebook/assets/js/95.66a94e22.js"><link rel="prefetch" href="/notebook/assets/js/96.dd7966d2.js"><link rel="prefetch" href="/notebook/assets/js/97.0a2755d3.js"><link rel="prefetch" href="/notebook/assets/js/98.4cfa7f60.js"><link rel="prefetch" href="/notebook/assets/js/99.5a9eb011.js">
    <link rel="stylesheet" href="/notebook/assets/css/0.styles.0461dffb.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/notebook/" class="home-link router-link-active"><!----> <span class="site-name">我的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/notebook/guide/" class="nav-link">
  指南
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/notebook/guide/" class="nav-link">
  指南
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Bootstrap</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/notebook/bootstrap/bootstrap简介.html" class="active sidebar-link">Bootstrap 简介</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notebook/bootstrap/bootstrap简介.html#概述" class="sidebar-link">概述</a></li><li class="sidebar-sub-header"><a href="/notebook/bootstrap/bootstrap简介.html#为什么使用-bootstrap" class="sidebar-link">为什么使用 Bootstrap？</a></li><li class="sidebar-sub-header"><a href="/notebook/bootstrap/bootstrap简介.html#bootstrap-包的内容" class="sidebar-link">Bootstrap 包的内容</a></li></ul></li><li><a href="/notebook/bootstrap/bootstrap环境安装.html" class="sidebar-link">Bootstrap 环境安装</a></li><li><a href="/notebook/bootstrap/bootstrap网格系统.html" class="sidebar-link">Bootstrap 网格系统</a></li><li><a href="/notebook/bootstrap/媒体查询的用法.html" class="sidebar-link">媒体查询的用法</a></li><li><a href="/notebook/bootstrap/bootstrap表格.html" class="sidebar-link">Bootstrap 表格</a></li><li><a href="/notebook/bootstrap/bootstrap字体图标.html" class="sidebar-link">Bootstrap 字体图标</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="bootstrap-简介"><a href="#bootstrap-简介" class="header-anchor">#</a> Bootstrap 简介</h1> <h2 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h2> <p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。</p> <h2 id="为什么使用-bootstrap"><a href="#为什么使用-bootstrap" class="header-anchor">#</a> 为什么使用 Bootstrap？</h2> <ul><li>移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。</li> <li>浏览器支持：所有的主流浏览器都支持 Bootstrap。</li> <li>容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。</li> <li>响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。</li> <li>它为开发人员创建接口提供了一个简洁统一的解决方案。</li> <li>它包含了功能强大的内置组件，易于定制。</li> <li>它还提供了基于 Web 的定制。</li> <li>它是开源的。</li></ul> <h2 id="bootstrap-包的内容"><a href="#bootstrap-包的内容" class="header-anchor">#</a> Bootstrap 包的内容</h2> <ul><li>基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。</li> <li>CSS：Bootstrap 自带以下特性，全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。</li> <li>组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。</li> <li>JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。</li> <li>定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021-1-29 16:08:01</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/notebook/bootstrap/bootstrap环境安装.html">
        Bootstrap 环境安装
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/notebook/assets/js/app.fc2ebdde.js" defer></script><script src="/notebook/assets/js/2.cb323964.js" defer></script><script src="/notebook/assets/js/63.ac1f088e.js" defer></script>
  </body>
</html>
